<template>
  <MrCustom bg-color="bg-gradual-blue " is-back>
    <template #backText>
      返回
    </template>
  </MrCustom>
  <view v-if="scheduleInfo">
    <view class="bg-white radius-lg full-height" >
      <!-- 顶部个人信息-头像、布局 -->
      <view class="flex padding-sm justify-between solid-bottom">
        <view class="flex flex-sub">
          <view class="padding-lr-xs">
            <MrAvatar :src="scheduleInfo.avatar"></MrAvatar>
          </view>
          <view class="padding-xs text-xl text-black">
            <view>{{ scheduleInfo.nurseName }}</view>
            <view class="text-sm text-gray padding-top-xs">{{ scheduleInfo.hospital }}</view>
          </view>
        </view>
        <view class="text-gray text-sm padding-right-xs padding-top-sm">工号：{{ scheduleInfo.jobNum }}</view>
      </view>

      <!-- 打卡信息-时间轴 -->
      <view class="margin-sm margin-top">
        <view class="text-gray padding-bottom">打卡信息：</view>
        <view class="cu-timeline">
          <view class="cu-item cur cuIcon-noticefill">
            <view class="content bg-blue light shadow-blur"
                  v-if="scheduleInfo.startWorkTime&&scheduleInfo.startWorkAddress">
              <text class="cuIcon-time">{{ scheduleInfo.startWorkTime }}</text>
              <view class="cuIcon-location padding-top-xs">{{ scheduleInfo.startWorkAddress }}</view>
            </view>
            <view class="content bg-gray shadow-blur" v-else>
              <text class="text-orange">上班未打卡</text>
            </view>
          </view>
          <view class="cu-item cur cuIcon-noticefill">
            <view class="content bg-blue light shadow-blur"
                  v-if="scheduleInfo.endWorkTime&&scheduleInfo.endWorkAddress">
              <text class="cuIcon-time">{{ scheduleInfo.endWorkTime }}</text>
              <view class="cuIcon-location padding-top-xs">{{ scheduleInfo.endWorkAddress }}</view>
            </view>
            <view class="content bg-gray shadow-blur" v-else>
              <text class="text-orange">下班未打卡</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 打卡按钮 -->
      <view class="margin-top-xl">
        <view class="flex justify-center">
          <view @click="handleClockInStart" class="cu-clockin-time flex justify-center align-center"
                :animation="animationData"
                v-if="!scheduleInfo.startWorkTime&&myMoment().isBefore(scheduleInfo.start)">
            <view class="text-white" style="z-index: 99;">
              <text>上班打卡 {{ curTime }}</text>
            </view>
          </view>
          <view v-else-if="scheduleInfo.startWorkTime&&myMoment().isBefore(scheduleInfo.end)" class="cu-clockin-time_over flex justify-center align-center"
                @click="handleClockInStart">
            <text class="text-white" style="z-index: 99;">已打卡 {{ scheduleInfo.startWorkTime }}</text>
          </view>
          <view v-else-if="myMoment().isBefore(myMoment(scheduleInfo.end).endOf('day')) &&myMoment().isAfter(scheduleInfo.end)&&!scheduleInfo.endWorkTime"
                class="cu-clockin-time flex justify-center align-center" @click="handleClockInEnd">
            <text class="text-white" style="z-index: 99;">下班打卡 {{ curTime }}</text>
          </view>
          <view v-else-if="scheduleInfo.endWorkTime" class="cu-clockin-time_over flex justify-center align-center" @click="handleClockInEnd">
            <text class="text-white" style="z-index: 99;">已打卡 {{ scheduleInfo.endWorkTime }}</text>
          </view>
          <view v-else class="cu-clockin-time_over flex justify-center align-center">
            <text class="text-white" style="z-index: 99;">暂不可打卡</text>
          </view>
        </view>
        <view class="margin-tb padding-tb flex justify-center align-center">
          当前位置：
          <text class="cuIcon-location text-lg">{{ curAddress }}</text>
          <text class=" padding-left text-orange" @click="getLocation">刷新</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">


import {onLoad} from "@dcloudio/uni-app";
import {ref} from "vue";
import MrCustom from "@/components/common/MrCustom.vue";
import MrAvatar from "@/components/common/MrAvatar.vue";
import api from "@/api";
import myMoment from "@/utils/common/myMoment";


const curAddress = ref()
const scheduleInfo = ref()
const animationData = ref()
const curTime = ref()

onLoad((option) => {
  scheduleInfo.value = JSON.parse(decodeURIComponent(option.scheduleInfo))
  console.log(scheduleInfo.value)
  authorize()
  getCurrentTime()
})


const handleClockInStart = () => {
  uni.vibrateLong({}); //使手机震动400m
  let animation = uni.createAnimation({
    timingFunction: 'ease-in',
    duration: 1000
  })
  animation.rotateY(180).step();
  animationData.value = animation.export()
  setTimeout(() => {
    scheduleInfo.value.startWorkTime = curTime.value
    scheduleInfo.value.startWorkAddress = curAddress.value

  }, 1000)
}
const handleClockInEnd = () => {
  scheduleInfo.value.endWorkTime = curTime.value
  scheduleInfo.value.endWorkAddress = curAddress.value
}

const getCurrentTime = () => {
  let time = setInterval(() => {
    curTime.value = myMoment().format("HH:mm:SS")
  }, 1000)
}


const getLocation = () => {
  uni.getLocation({
    type: 'wgs84',
    success: (res) => {
      const latitude = res.latitude
      const longitude = res.longitude;
      api.tencent.location(
          latitude,
          longitude
      ).then(re => {
        if (re.data.status === 0) {
          curAddress.value = re.data.result.address
        } else {
          console.log("获取信息失败，请重试！")
        }
      })
    },
    fail: (res) => {
      console.log(res)
    },
  })
}
const authorize = () => {
  uni.getSetting({
    success(res) {
      console.log('getSetting', res)
      if (res.authSetting['scope.userLocation'] !== undefined && !res.authSetting['scope.userLocation']) {
        uni.showModal({
          title: '请求授权当前位置',
          content: '需要获取您的地理位置，请确认授权',
          success: function (res) {
            if (res.cancel) {
              uni.showToast({
                title: '拒绝授权',
                icon: 'none',
                duration: 1000
              })
            } else if (res.confirm) {
              uni.openSetting({
                success: function (dataAu) {
                  if (dataAu.authSetting["scope.userLocation"]) {
                    //再次授权，调用wx.getLocation的API
                    getLocation()
                  } else {
                    uni.showToast({
                      title: '授权失败',
                      icon: 'none',
                      duration: 1000
                    })
                  }
                }
              })
            }
          }
        })
      } else if (res.authSetting['scope.userLocation'] == undefined) {
        getLocation();
      } else {
        getLocation();
      }
    }
  })
}


</script>

<style scoped>

</style>